<template>
	<view class="bg" style="width:100%;
	overflow-x:hidden;">
		<view class="top">
			<img src="https://oa.yuxiang123.cn/assets/task/shop/user_bann2.png"   mode="widthFix" style="width: 100%;">
			<view class="top_title"><img src="https://oa.yuxiang123.cn/assets/task/shop/biaoti.png" mode="widthFix" style="width: 260rpx;"></view>
			
			<view style="position: absolute;top: 160rpx;width: 100%;">
				<swiper  autoplay="true" interval="3000" style="height: 350rpx;">
					<swiper-item v-for="(item,index) in slideshow" :key="index"  >
						<image v-if="item.type == 1" class="xy_bannder"  mode="widthFix" :src="item.img" @click="videoshow_bannder()"></image>
						<image v-if="item.type == 2" class="xy_bannder"  mode="widthFix" :src="item.img" @click="toPages_banner_xcx(item)"></image>
						<image v-if="item.type == 3" class="xy_bannder"  mode="widthFix" :src="item.img" @click="toPages(item.url)"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="gonggao">
				<img src="https://oa.yuxiang123.cn/assets/task/shop/gonggao.png" mode="widthFix" style="width: 80rpx;margin-top: 30rpx;margin-right: 15rpx;">
				<text>{{Announcement[ann_index].content}}</text>
				
			</view>
			<view class="button">
				<view class="button_n" @click="type=1">
					<img src="https://oa.yuxiang123.cn/assets/task/shop/al.png"   mode="widthFix" style="width: 50%;" >
					<view>客户案例</view>
				</view>
				<view  class="button_n" @click="type=2">
					<img src="https://oa.yuxiang123.cn/assets/task/shop/xs.png"   mode="widthFix" style="width: 50%;">
					<view>新手指南</view>
				</view>
				<view class="button_n">
					<img src="https://oa.yuxiang123.cn/assets/task/shop/fw.png" @click="toPages('/merchant/shop/meal_recharge',false)"  mode="widthFix" style="width: 50%;">
					<view>服务套餐</view>
				</view>
				<view class="xs">限时优惠</view>
				<view class="button_n" >
					<img src="https://oa.yuxiang123.cn/assets/task/shop/tj.png" @click="toPages('/subone/user/invite',false)"  mode="widthFix" style="width: 50%;">
					<view>推荐有奖</view>
				</view>
			</view>
			
			<!-- <view class="my_task" v-if="list.length >0">
				<view style="display: flex;flex-wrap: wrap;">
					<view class="recTask">
						我发布的
					</view>
				
				</view>
				<view class="taskList" v-for="(item,index) in list" :key="index">
					<view style="width: 22%;z-index: 100;display: flex;justify-content: center;align-items: center;">
						<img :src="item.imgs"  style="width: 100rpx;height: 100rpx; border-radius: 20rpx;">
					</view>
					<view style="width: 58%;z-index: 100;">
						<view class="taskTitle">
							{{item.title}}
						</view>
						<view class="taskContent">
							{{item.content}}
						</view>
					</view >
					<view style="width:20%;z-index: 100;">
						<view class="getTask" @click="toPages('/merchant/issue/add?id='+item.id)" v-if="item.status==-3 || item.status==0">编辑</view>
						<view class="getTask" @click="toPages('/merchant/shop/task_detail?id='+item.id)" v-else>查看详情</view>
					</view>
				</view>
				<view class="nodata" v-if="list.length == 0" >暂无更多数据 </view>
			</view> -->
			<view v-if="type== 1">
				<view style="display: flex;flex-wrap: wrap;margin-top: 40rpx;">
					<view class="recTask"  style="margin-left: 4%;font-size: 38rpx;">
						营销案例
					</view>
				</view>

				
				<view class="biaoti" style="
				width: 94%;
				margin-left: 3%;
				margin-top: 30rpx;
				border-radius: 30rpx;
				line-height: 70px !important;
				" :style="MarketingList[index].background">
					<img src="https://oa.yuxiang123.cn/assets/task/shop/anni_1.png" mode="widthFix" style="width: 70rpx;margin-right: 20rpx;">
					{{MarketingList[index].title}}
					<img src="https://oa.yuxiang123.cn/assets/task/shop/anni_1.png" mode="widthFix" style="width: 70rpx;margin-left: 20rpx;">
				</view>
				<view class="my_task" style="margin-bottom: 260rpx;">
					<view style="width: 100%;height: 100rpx;">
						{{MarketingList[index].content}}
					</view>
					<view   style="width: 100%;margin-top: 20rpx;">
						<view style="display: inline-block;width: 100%;margin-bottom: 40rpx;">
							<img :src="MarketingList[index].imgs"  mode="widthFix"   @click="videoshow(item)" style="width: 100%; border-radius: 20rpx;" >
						</view>
					</view>
					<view>
						<view class="shu" ></view>
						<text class="shu_content">服务内容</text>
						<view class="shu_fw"  :style="MarketingList[index].background_s">
							{{MarketingList[index].serve_content}}
						</view>
					</view>
					<view>
						<view class="shu" ></view>
						<text class="shu_content" >运营效果</text>
						<view class="button" style="margin-top: 20rpx;">
							<view class="button_n nss" :style="MarketingList[index].background_s">
								<view class="yy_t">搜索</view>
								<view class="yy_s">{{MarketingList[index].search}}%</view>
								<view class="yy_n">提升</view>
							</view>
							<view  class="button_n ns" :style="MarketingList[index].background_s">
								<view class="yy_t">相关笔记</view>
								<view class="yy_s">{{MarketingList[index].note}}%</view>
								<view class="yy_n">提升</view>
							</view>
							<view class="button_n ns" :style="MarketingList[index].background_s">
								<view class="yy_t">笔记曝光</view>
								<view class="yy_s">{{MarketingList[index].exposure}}+</view>
							</view>
							<view class="button_n ns" :style="MarketingList[index].background_s">
								<view class="yy_t">互动值</view>
								<view class="yy_s">{{MarketingList[index].exposure}}+</view>
				
							</view>
						</view>
					</view>

					<view style="text-align: center;">
						<text v-for="(item,indexx) in MarketingList" :key="indexx" >
						<text class="xuanzhong" v-if="indexx == index"></text>
						<text class="weixuan"  v-else></text>
						</text>
					</view>
					
					
					<!-- <view class="nodata" v-if="list.length == 0" >暂无更多数据 </view> -->
				</view>
			</view>
			<view v-if="type== 2">
				<view style="display: flex;flex-wrap: wrap;margin-top: 40rpx;">
					<view class="recTask"  style="margin-left: 4%;font-size: 38rpx;">
						新手指南
					</view>
				</view>
				<view class="my_task" style="margin-bottom: 260rpx;margin-top:30rpx">
					<view   style="width: 100%;margin-top: 20rpx;">
						<view style="display: inline-block;width: 100%;margin-bottom: 40rpx;" v-for="(item,index) in videoList" :key="index">
							<img :src="item.img"   @click="videoshow(item)" style="width: 100%; border-radius: 20rpx;" >
						</view>
					</view>
				</view>
			</view>
		
			<u-popup v-model="showHaibao" mode="center">
				<!-- #ifdef MP-WEIXIN -->
					<image class="haibao" :src="haibao" mode="widthFix"></image>
					<view class="haibao_btn" @click="download_haibao()">保存图片分享</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || H5 -->
					<image class="haibao" :src="haibao"  mode="widthFix" @click="clickImg()"></image>
					<view class="haibao_btn" >点击图片长按保存分享</view>
				<!-- #endif -->
			</u-popup>

		</view>
		<view v-if="videoplay" style="position: absolute;
        top: -3000px;">
            <video
            controls
            id="myvideo"
            :src="videoUrl"
            autoplay="true"
            ></video>
        </view>
		<u-popup v-model="sPopup" mode="bottom">
			<view class="shareArea">
				<view class="shareTitle">
					<view class="tit">
						<text class="text">分享给朋友</text>
					</view>
					<image class="close" src="/static/close.png" mode="aspectFill" @click="sPopup=false"></image>
				</view>
				<view class="shareList">
					<button open-type="share" class="shareItem" style="margin:0;padding:0;line-height:40rpx;"  >
						<image class="shareImg" src="@/static/wx.png" mode="aspectFit"></image>
						<text class="shareTxt">微信好友</text>
					</button>
				</view>
			</view>		
		</u-popup>
        <tabbar :type="0" :showissue="showissue" @closeissue="closeissue" @openissue="openissue"></tabbar>

	</view>
</template>

<script>
export default {
	data() {
		return {
			sPopup:false,
			showHaibao:false,
			haibao:'https://oa.yuxiang123.cn/assets/task/kefu.png',
			type:1,
			userInfo:'',
			task_sum:'',
			shareimg:'',
			videoUrl:'',
			sign:[],
			videoList:[],
			list:[],
            videoplay:false,
            bottom:false,
            is_fb:false,
            showissue:false,
            is_tishi:false,
            page:1,
            pagesize:10,
			slideshow:[],
			Announcement:[],
			MarketingList:[],
			ann_index:0,
			index:0,
			intervalTimer:null,
			singleTimer:null,
		}
	},
	// 1.发送给朋友
	onShareAppMessage(e) {
		var that=this;
		return {
			title: '苏拉营销',
			path: '/pages/shop/shopClass',    // 全局分享的路径
		}
	},
	onLoad(p) {
		this.getMarketingList();
		this.getAnnouncement();
		if(p.invite_user_id){
            uni.setStorageSync('invite_user_id',p.invite_user_id);
        }
		if(p.scene){
            uni.setStorageSync('invite_user_id',p.scene);
        }
		this.getSlideshow();
		this.getvideoList();
		
		

		
	},
	onReady: function () {
		this.videoContext = uni.createVideoContext("myvideo", this);    // this这个是实例对象  必传
	},
	onHide() {
		var that=this;
		//清除定时器			 
		if(that.intervalTimer) { 
			clearInterval(that.intervalTimer);  
			that.intervalTimer= null;
		}

		if(that.singleTimer) { 
			clearInterval(that.singleTimer);  
			that.singleTimer= null;
		}

		
	},
	onShow() {
		var that = this;
		this.userInfo = uni.getStorageSync('userInfo'); 
		if(this.userInfo){
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/user/homepage',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				method: 'POST',
				data:{
					token:uni.getStorageSync('token'),
					user_id:that.userInfo.id
				},
				success: (res) => {
					if(res.data.code == 1){
						that.userInfo = res.data.data.user;
						uni.setStorageSync('userInfo', res.data.data.user);
					}
				}
			})
			this.getDistributeTask();
			this.get_task_sum();
		}


		if(uni.getStorageSync('openid') && !this.userInfo.openid){
            //储存用户openid
            // #ifdef MP-WEIXIN
            uni.login({
                success: function (res) {
                    console.log(res.code)
                    uni.request({
                        url:'https://oa.yuxiang123.cn/api/index/getOpenid',
                        method:'POST',
                        header:{"content-type":"application/x-www-form-urlencoded"},
                        data:{'code':res.code,token:uni.getStorageSync('token'),'is_shop':1},
                        success: (result) => {
                            console.log('openid =============='+result.data.data);
                        }
                    })	
                }					
            });
            // #endif
        }
	},
    onReachBottom() {
        this.page = ++this.page;
        this.getDistributeTask_1();
    },
    // 下拉刷新
    onPullDownRefresh() {
        let that = this;
        this.page=1;
        this.bottom = false;
        this.list.length=0;
        setTimeout(function () {
            that.getDistributeTask();
            uni.stopPullDownRefresh();
        }, 200);
    },
	methods: {
		getMarketingList:function(){
			var that=this;
            uni.request({
                url: 'https://oa.yuxiang123.cn/api/marketing/getMarketingList',
                header:{
                    "content-type": "application/x-www-form-urlencoded"
                },
                method: 'POST',
                success: (res) => {
                    that.MarketingList = res.data.data;

					var countt = that.MarketingList.length;
					//开启定时器
					const intervalTimer = setInterval(() => {
					if(that.index == countt-1){
						that.index = 0;
					}else{
						that.index = that.index+1;
					}
					}, 5000);

                }
            })
        },
		getAnnouncement:function(){
			var that=this;
            uni.request({
                url: 'https://oa.yuxiang123.cn/api/marketing/getAnnouncement',
                header:{
                    "content-type": "application/x-www-form-urlencoded"
                },
                method: 'POST',
                success: (res) => {
                    that.Announcement = res.data.data;
					var counttt = that.Announcement.length;
					//开启定时器
					const singleTimer = setInterval(() => {
						if(that.ann_index == counttt-1){
							that.ann_index = 0;
						}else{
							that.ann_index = that.ann_index+1;
						}
					}, 1800);
					
                }
            })
        },
		videoshow_bannder() {
			var that = this;
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/index/get_noviceguide',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					type:3
				},
				method: 'POST',
				success: (res) => {
                    if(res.data.code == 1){
						var data = res.data.data;
						//e 是通过点击事件拿到的视屏地址
						that.videoUrl =data[0].video;
						that.videoContext.requestFullScreen({ direction: 0 });  //direction: 90  这个是控制全屏的时候视屏旋转多少度 
						that.videoContext.play();
						that.videoplay = true;  // 显示播放盒子
                    }
				}
			})
		},
		videoshow(item) {
			//e 是通过点击事件拿到的视屏地址
			this.videoUrl =item.video;
			this.videoContext.requestFullScreen({ direction: 0 });  //direction: 90  这个是控制全屏的时候视屏旋转多少度 
			this.videoContext.play();
			var that = this;
			that.videoplay = true;  // 显示播放盒子
		},
		getSlideshow:function(){
            this.$show();
            uni.request({
                url: 'https://oa.yuxiang123.cn/api/index/slideshow',
                header:{
                    "content-type": "application/x-www-form-urlencoded"
                },
                data:{
                    shop_site:'苏拉首页'
                },
                method: 'POST',
                success: (res) => {
                    this.$hide()
                    this.slideshow = res.data.data;
                }
            })
        },
		sq(){
			if(this.userInfo.shop_status == 0){
				this.$Toast('审核已提交,请等待审核');
			}else if(this.userInfo.shop_status == 1){
				this.$Toast('您已经是商户了');
			}else if(this.userInfo.shop_status == -2){
				this.$Toast('您已被冻结,请联系客服');
			}else{
				this.toPages('/merchant/shop/add_shop')
			}
		},
		closeissue:function(){
            this.showissue=false;
        },
        openissue:function(){
            this.showissue=true;
        },
		getshareimg(){
			var that=this;
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/index/shareimg',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				method: 'POST',
				data:{
					name:'shop_invite_img'
				},
				success: (res) => {
					that.shareimg=res.data.data.shareimg;
				}
			})

		},
		new_task(){
			// #ifdef MP-WEIXIN
			wx.requestSubscribeMessage({
				tmplIds: ['xF751UgAPsa4BajwBin-BU6lG1riuvJsNxNpIPGM28c'],
				success (res) { 
					if(res['xF751UgAPsa4BajwBin-BU6lG1riuvJsNxNpIPGM28c']=='accept'){
						uni.request({
							url: 'https://oa.yuxiang123.cn/api/distribute_task/is_task_subscription',
							header: {"content-type": "application/x-www-form-urlencoded"},
							data:{token:uni.getStorageSync('token')},
							method: 'POST'
						})	
					}
				}
			})	
			// #endif
		},
		download_haibao(){
			var that=this;
			uni.getSetting({
					success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
									that.saveImgToLocal();
							},
							fail() {//这里是用户拒绝授权后的回调
							}
							})
					} else {//用户已经授权过了
						that.saveImgToLocal();
					}
				}
			})
		},
		saveImgToLocal(){
			var that=this;
			uni.downloadFile({
				url: that.haibao,//图片地址
				success: (res) =>{
					if (res.statusCode === 200){
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败",
									icon: "none"
								});
							}
						});
					} 
				}
			});
		},
		clickImg() {
			var url = this.haibao;
			var that = this;
			// #ifdef MP-WEIXIN
			uni.previewImage({
				urls: [url]
			})
			// #endif
			// #ifdef  APP-PLUS
			uni.previewImage({
				urls: [url],
				longPressActions: {
					itemList: ['保存图片'],
					success: (data) => {
						if(!uni.getStorageSync('save_img_previewImage') && that.isHuaWei){
							uni.showModal({
								title: "获取你的相册权限",
								content: "将获取你的相册权限,用于储存图片到本地相册",
								success: function (res) {
									if (res.cancel) {
									} else if (res.confirm) {
										uni.setStorageSync('save_img_previewImage',1);
										uni.downloadFile({
											url: url,
											success: (res) => {
												//将临时路径保存到相册，即可在相册中查看图片
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath, //不支持网络地址
													success: function () {
														uni.showToast({
														title: '保存图片到相册成功',
														position: 'bottom'
														});
													},
													fail: (e) => {
														if(e.errCode == 12 &&  e.errMsg == 'saveImageToPhotosAlbum:fail No Permission'){
															uni.showModal({
																content: '检测到您没打开相册权限，如需使用储存图片功能请前往设置开启相册权限？',
																confirmText: "确认",
																cancelText: '取消',
															})
														}
													}
												});
											}
										})
									}
								},
							});
						}else{
							uni.downloadFile({
								url: url,
								success: (res) => {
									//将临时路径保存到相册，即可在相册中查看图片
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath, //不支持网络地址
										success: function () {
											uni.showToast({
											title: '保存图片到相册成功',
											position: 'bottom'
											});
										},
										fail: (e) => {
											if(e.errCode == 12 &&  e.errMsg == 'saveImageToPhotosAlbum:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相册权限，如需使用储存图片功能请前往设置开启相册权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}
										}
									});
								}
							})
						}
					}
				}
			})
			// #endif
		},	
		await(){
			this.$Toast('任务开发中,敬请期待');
		},
		lingqu(item,index){
			if(this.is_login()) return false;
			if(this.is_fb){
				this.$Toast('请勿重复领取任务');
				return false;
			}
			this.is_fb = true;
            var that = this;
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/distribute_task/getTask',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    task_type:item.task_type,
                    type:item.type,
				},
				method: 'POST',
				success: (res) => {
					setTimeout(function () {
						that.is_fb = false;
					}, 1000);
                    that.$Toast(res.data.msg);
                    if(res.data.code == 1){
						setTimeout(function () {
							uni.navigateTo({
								url:'/merchant/task/distribute_task_user'
							});
						}, 1000);
                    }
				}
			})	
		},
		toPages:function(url,is_login = true){
			if(is_login){
				if(!this.userInfo){
					url='/subone/public/login';
				}else if(!this.userInfo.shop){
					if(this.userInfo.shop_status == 0){
						this.$Toast('审核已提交,请等待审核');
						return false;
					}else  if(this.userInfo.shop_status == -2){
						this.$Toast('您已被冻结,请联系客服');
						return false;
					}else{
						url='/merchant/shop/add_shop';
					}
				}
			}
			if(url == '/pages/task/taskList'){
				uni.switchTab({
					url:url
				})
				return false;
			}
            if(url){
                uni.navigateTo({
                    url:url
                })
            }
        },
		getDistributeTask:function(){
			var that=this;
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/getShopList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:1,
                    pagesize:that.pagesize,
                    task_index:0
				},
				method: 'POST',
				success: (res) => {
                    if(res.data.code == 1){
						that.list = res.data.data;
                    }
				}
			})		
		},
		getvideoList:function(){
			var that=this;
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/index/get_noviceguide',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					type:2
				},
				method: 'POST',
				success: (res) => {
                    if(res.data.code == 1){
						that.videoList = res.data.data;
                    }
				}
			})		
		},
		get_task_sum:function(){
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/send_task_sum',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
				},
				method: 'POST',
				success: (res) => {
                    if(res.data.code == 1){
                        this.task_sum = res.data.data;
                    }
				}
			})		
		},
		getDistributeTask_1:function(){
            if(this.bottom == true){
                return false;
            }
			var that=this;
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/getShopList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:that.page,
                    pagesize:that.pagesize,
					task_index:0
				},
				method: 'POST',
				success: (res) => {
                    if(res.data.code == 1){
                        that.list = that.list.concat(res.data.data);
                        if(res.data.data.length<that.pagesize){
                            that.bottom=true;
                        }else{
							that.bottom=false;
						}
                    }
				}
			})		
		},
	
		is_login:function(){
			if(!this.userInfo || !this.userInfo.shop){
				var url = '';
				// #ifdef APP-PLUS ||H5
				url='/subone/public/phone_login';
				// #endif
				// #ifdef MP-WEIXIN
				url='/subone/public/login';
				// #endif
				uni.navigateTo({
                    url:url
                })
				return true;
			}else{
				return false;
			}
        },
	}
}
</script>
<style>
page{
	background-color: #f2f9fd;
	
}
</style>
<style lang="scss">
	.xuanzhong{
		background-color: #31D1C9;
		width: 50rpx;
		height: 10rpx;
		border-radius: 10rpx;
		display: inline-block;
		margin-left: 10rpx;
	}
	.weixuan{
		background-color: rgba(49, 209, 201, 0.25);
		width: 15rpx;
		height: 10rpx;
		border-radius: 10rpx;
		display: inline-block;
		margin-left: 10rpx;
	}
	.yy_t{
		font-size: 32rpx;
		margin-bottom: 15rpx;
	}
	.yy_s{
		font-size: 38rpx;
		color: #31D1C9;

	}
	.yy_n{
		background-color: #FF8F1F;
		width: 80rpx;
		height: 38rpx;
		line-height: 38rpx;
		color: #fff;
		text-align: center;
		border-radius: 8rpx;
		margin-top: 8rpx;
	
	}
	.ns{
		
		width: 20.7% !important;
		margin-left: 2.5% !important;
		text-align: left !important;
		padding-left: 15rpx !important;
	}
	.nss{
	
		width: 20.7% !important;
		margin-left: 0 !important;  
		text-align: left !important;
		padding-left: 15rpx !important;
	}
	.shu_fw{
		width: 91%;
		//background: rgba(49, 209, 201, 0.1);
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;
	}
	.shu_content{
		margin-left: 30rpx;
		font-size: 36rpx;
		font-weight: 600;

	}
	.shu{
		background-color: #31D1C9;
		width: 8rpx;
		height: 35rpx;
		border-radius: 10px;
		display: inline-block;   
		position: absolute;
		margin-top: 8rpx; 
	}
	.biaoti_img{
		position: absolute;
		width: 94%;
		margin-left: 3%;
		margin-top: 30rpx;
	}
	.biaoti{
		height: 100px;
		line-height: 100px;
		position: absolute;
		text-align: center;
		width: 100%;
		font-size: 32rpx;
		color: #fff;
	}
	.gonggao{
		display: flex;
		height: 90rpx;
		background-color: #fff;
		margin-top: 170rpx;
		width: 88%;
		margin-left: 4%;
		line-height: 90rpx;
		padding-left: 4%;
		border-radius: 25rpx;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		color: #999;
	}
	.my_task{
		color: #555;
		margin-top: 150rpx;
		position: relative;
		width: 84%;
		margin-left: 3%;
		padding: 5%;
		background: #fff;
		border-radius: 30rpx;
		
		margin-bottom: 160rpx;
	}
	/*分享*/
	.shareArea{
		display: flex;
		flex-direction:column;
		background-color: #fff;
		border-radius: 16px 16px 0 0;
	}
	.shareTitle{display:flex;padding:20rpx 30rpx 0 30rpx;justify-content:space-between;flex-direction: row;}
	.shareTitle .tit{
		flex-direction: row;
		justify-content: flex-start;
		.text{height:60rpx;line-height:60rpx;font-size:32rpx;}
		.wenhao{width:40rpx;height: 40rpx; margin:10rpx 0 0 10rpx;}
	}
	.shareTitle .close{width:40rpx;height:40rpx;margin:10rpx 0 0 0;}
	.shareList{
		display: flex;
		flex-direction:row;
		padding: 30rpx;
		color:white;
	}
	.shareItem{
		width:130rpx;
		margin-right:40rpx;
		justify-content:center;
		text-align: center;
		overflow: hidden;
	}
	.shareItem::after{border:none;}

	.shareItem .shareImg{
		width: 90rpx;
		height:90rpx;
		margin:0 20rpx;
		line-height: 40rpx;
	}
	.shareItem .shareTxt{
		width:130rpx;
		text-align: center;
		font-size: 28upx;
		margin-top:20rpx;
		color:#999;
	}
.haibao{width:500rpx;}
.haibao_btn{
	width:100%;
	height:80rpx;
	line-height: 80rpx;
	background-color:#f60;
	color:#fff;
	text-align: center;
}
.xy_bannder{
    width: 94%;
    margin-left: 3%;
    margin-top: 30rpx;
}
.bannTask{
	width: 94%;
	margin-left: 3%;
	margin-top: 50rpx;
	margin-bottom: 50rpx;
}
.recTask{
	width: 82%;
	font-size: 34rpx;
	font-weight: 600;
}
.taskList{
	width: 94%;
	//margin-left: 3%;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	height: 170rpx;
	border-bottom: 1px solid #ECF6FC;
}
.taskTitle{
	font-size: 34rpx;
	font-weight: 600;
	line-height: 60rpx;
	margin-top: 30rpx;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.taskContent{
	color: #999;
	font-size: 26rpx;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.getTask{
	background: #3662EC;
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	width: 155rpx;
	text-align: center;
	border-radius: 30rpx;
	margin-top: 55rpx;
	font-size: 26rpx;
}
.top_title{
	position: absolute;
    top: 100rpx;
    left: 40rpx;
    font-size: 36rpx;
    font-weight: 600;
}
.top-z{
	width: 94%;
    position: absolute;
    top: 140rpx;
    left: 3%;
}
.button{
	
	display: flex;
	flex-wrap: wrap;
}
.button_n{
	color: #555;
	font-size: 27rpx;
	width: 20%;
	height: 160rpx;
	margin-left: 4%;
	border-radius: 10px;
	opacity: 1;
	background: #FFFFFF;
	text-align: center;
	padding-top: 5%;
}
.top{
	background-color: #f4f5f7;
}




.bg{background-color: #f4f5f7;}


.info{width:100%;margin:30rpx 0; overflow:hidden;}
.info .avatar{width:90rpx;height:90rpx;border:8rpx solid #fff;border-radius: 50%;float:left;margin-right:10rpx;}
.info .info_title{width:50%;float:left;padding-left: 40rpx;}
.info .info_title .h1{font-size:65rpx;line-height:72rpx;font-weight: 540;}
.info .info_title .h1 .sign_count{font-weight: bold;color:#ffea00;}
.info .info_title .h2{font-size:24rpx;line-height: 60rpx;}
.info .h3{
	border-radius: 76rpx;
    border: 1px solid #F3F3F3;
    color: #F8A120;
	height: 50rpx;
    margin-top: 30rpx;
    line-height: 50rpx;
    float: right;
    background-color: #fff;
    font-size: 26rpx;
    padding: 0 30rpx;
    margin-right: -15rpx;}
.info .h3 .r{width:40rpx;height:40rpx; float:left;margin:10rpx;}
.n_title{
    font-size: 28rpx; 
    line-height: 50rpx;
    margin-top: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top .sign{width:100%;background-color: #fff;    border-radius: 50rpx 50rpx 0 0;}
.top .sign .sign_title{padding:30rpx;font-size: 36rpx;font-weight: bold;    text-align: center;}
.top .sign .sign_day{overflow: hidden;padding:0 30rpx;}
.top .task_title{padding-top: 20rpx; justify-content: space-between;background-color: #fff;margin-top:20rpx;}
.top .task_title .h1{font-size:36rpx; font-weight: bold;color:#000;padding: 30rpx;}
.top .task_title .h2{font-size:28rpx; color:#999;padding:30rpx;}
.top .task_list{background-color: #fff;}
.nodata{width:100%;height:100rpx;line-height: 100rpx;text-align: center;font-size: 26rpx;color:#999;}
.dz_box{width:100%;background-color:#fff;border-radius: 10rpx; overflow: hidden;z-index: 10000000;}
.dz_box .dz_close{width:100%;height: 40rpx;
	image{width:50rpx;height: 50rpx;float:right;margin: 20rpx 20rpx 0 0;}
}
.hong{
	width: 20rpx;
    height: 20rpx;
    background: red;
    display: inline-block;
    margin-right: 20rpx;
    border-radius: 50%;
}
.dz_box .dz_title{margin-left: 8%; width:100%;text-align: left; height:80rpx;line-height:80rpx; font-size: 34rpx;color:#000;}
.dz_box .dz_content{width:90%;margin-left: 8%;;line-height:50rpx ; font-size: 32rpx;color:#333;}
.dz_box .dz_btn{
	width:80%;height:100rpx;line-height:100rpx;text-align: center;font-size:36rpx; margin:40rpx 10%;border-radius:50rpx; background-color: #feb543;color:#fff; 
}
.xs{
	position: absolute;
    left: 62%;
    background: red;
    color: #fff;
    font-size: 26rpx;
    width: 135rpx;
    text-align: center;
    height: 42rpx;
    line-height: 42rpx;
    border-radius: 28rpx 20rpx 20rpx 0;
}

</style>
